<template>
  <div>

    <div id="app">
                <table class="mars" cellspacing="1" cellpadding="0" width="100%" border="0">
                  <tbody>
                    <tr bgcolor="#fba661" height="30">
                      <th width="7%"><div align="center">编号ID</div></th>
                      <th width="7%"><div align="center">姓名</div></th>
                      <th width="7%"><div align="center">单位</div></th>
                      <th width="8%"><div align="center">职称</div></th>
                      <th width="7%"><div align="center">国籍</div></th>
                      <th width="8%"><div align="center">性别</div></th>
                      <th width="8%"><div align="center">电话</div></th>
                      <th width="21%"><div align="center">简介</div></th>
                      <th width="9%"><div align="center">修改</div></th>
                      <th width="9%"><div align="center">删除</div></th>
                    </tr>
                    <tr bgcolor="#e4f1fe" v-for="(expert,index) in expertList" :key="index">
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.expertid}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.name}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.unitname}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.title}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.nation}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.sex}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.tel}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center">{{expert.introduction}}</div></td>
                      <td bgcolor="#f3f3f3"><div align="center"><a href="#" @click="gotoUpdateExpert(index)">修改</a></div></td>
                      <td bgcolor="#f3f3f3"><div align="center"><a href="#" @click="deleteExpert(expert.expertid,expert.uid)">删除</a></div></td>
                    </tr>
                  </tbody>
                </table>
                  </div>

    <div id="container" >
    <div id="footer">
    <p><a href="http://www.ascenttech.com.cn/" target="_blank">版权所有：北京亚思晟商务科技有限公司 &copy;2004-2008|京ICP备05005681</a></p>
    </div>
    </div>

  </div>
</template>

<script>
export default {
  data:function() {
return {
      expert:{
            expertid:'',
            uid:'',
            name:'',
            nation:'',
            sex: '',
            unitname:'',
            title:'',
            tel:'',
            introduction:''

          },
      expertList:''


    };
},
    mounted(){
      this.getAllExpert();
    },
    methods: {
      getAllExpert:function ()
      {
        this.$axios.get(
                "http://localhost:8080/api/admin/showExperts"
        )
                .then((resp)=>
                {
                 this.expertList=resp.data.data

                  console.log(resp.data.code+" "+resp.data.msg)
                })
      },
      gotoUpdateExpert:function (index)
      {
        localStorage.setItem("expert",JSON.stringify(this.expertList[index]))
        location.href="/declare/admin/UpdateExpert";
      },
      deleteExpert:function (expertid,uid)
      {
        this.$axios({
          method: 'post',
          url: 'http://localhost:8080/api/admin/deleteExpert',
          data: {
            "expertid":expertid,
            "uid":uid
          }
        })
                .then((resp)=>
                {
                  console.log(resp.code+" "+resp.msg);
                  location.href="/declare/admin/showExperts";
                })
      }
    }
};
</script>

<style>
@import '@/assets/css/andreas08(blue).css'
</style>